import React, { useEffect } from 'react';
import { Divider, Row, Col, Button, Select, Input, InputNumber, Form } from 'antd';

const FormItem = Form.Item;

const LLMTabPane = (props) => {

    const { themeColor, ollamaModels, defaultThemeColor, onSaveSetting, settingItemMap } = props;

    const [form] = Form.useForm();
    const { getFieldsValue, validateFields, setFieldsValue, resetFields } = form;

    useEffect(() => {
        setFieldsValue(settingItemMap);
    }, [settingItemMap]);

    const saveChangedSetting = () => {
        validateFields().then(values => {
            values["source"] = "llm";
            onSaveSetting(values);
        }).catch(error => {
            const errors = error.errorFields;
            for (let i = 0; i < errors.length; i++) {
                console.log("LLMTabPane Error => " + errors[i].name[0] + " ===>>> " + errors[i].errors[0]);
            }
        });
    }

    const modelOptions = ollamaModels.map(item => {
        let optionObj = new Object();
        optionObj.label = item.id;
        optionObj.value = item.id;
        optionObj.desc = item.id;
        return optionObj;
    });

    const formItemLayout = {
        labelCol: { span: 2 },
        wrapperCol: { span: 22 }
    }

    return (
        <div style={{ padding: "8px 20px 0px 10px", display: "block" }}>
            <i className="ri-t-shirt-line" style={{ padding: "0px 10px 0px 0px" }} />文本模型
            <Divider />
            <Form form={form} labelAlign="left" { ...formItemLayout }>
                <FormItem label={<span><i className="ri-list-settings-line" style={{ padding: "0px 10px 0px 0px" }} />模型选择</span>} name="model">
                    <Select style={{ width: '50%' }} placeholder={"选择模型"} options={modelOptions} />
                </FormItem>
                <FormItem label={<span><i className="ri-link" style={{ padding: "0px 10px 0px 0px" }} />BaseUrl</span>} name="baseUrl">
                    <Input style={{ width: '50%' }} />
                </FormItem>
                <FormItem label={<span><i className="ri-key-line" style={{ padding: "0px 10px 0px 0px" }} />ApiKey</span>} name="apiKey">
                    <Input placeholder={"请输入ApiKey"} style={{ width: '50%' }} />
                </FormItem>
                <FormItem label={<span><i className="ri-rhythm-line" style={{ padding: "0px 10px 0px 0px" }} />TopK</span>} name="topk">
                    <InputNumber min={0} max={100} step={1} style={{ width: '50%' }} />
                </FormItem>
                <FormItem label={<span><i className="ri-temp-hot-line" style={{ padding: "0px 10px 0px 0px" }} />温度</span>} name="temperature">
                    <InputNumber min={0.0} max={1.0} step={0.1} style={{ width: '50%' }} />
                </FormItem>
            </Form>
            <Row style={{ padding: "5px 0px 0px 0px" }}>
                <Col span={2}><i className="ri-save-3-line" style={{ padding: "0px 10px 0px 0px" }} />保存:</Col>
                <Col span={22}>
                    <Button style={{ background: themeColor, width: "24%" }} onClick={() => saveChangedSetting()}>
                        <i className="ri-save-3-line" style={{ padding: "0px 10px 0px 0px" }} />保存
                    </Button>
                    <Button style={{ width: "24%", marginLeft: "2%" }} onClick={() => defaultThemeColor()}>
                        <i className="ri-save-3-line" style={{ padding: "0px 10px 0px 0px" }} />默认
                    </Button>
                </Col>
            </Row>
        </div>
    );
}

export default LLMTabPane;
